<template>
  <!--横幅广告列表 -->
  <view v-if="items.shopList.length > 0" class="shop_list_banner_item">
    <!--显示店铺列表-->
    <view v-if="items.show_type === 2" class="shop_list_box">
      <view class="list_banner_title">
        <view class="list_banner_title_content">
          <view class="list_banner_img"><image :src="BaseImgUrl + '/home/shop_list_banner_img01.png'" mode="widthFix" style="width: 100%;"></image></view>
          <view class="list_banner_title_text">
            <view class="list_banner_title_text_title">{{items.SloganText}}</view>
          </view>
        </view>
        <view @tap="gotoCategory()" class="list_banner_more">
          <view class="list_banner_more_text">更多</view>
          <u-icon name="arrow-right" size="12" color="#666666"></u-icon>
        </view>
      </view>
      <!---->
      <view class="list_banner_content">
        <view class="list_banner_item" v-for="(item, index) in items.shopList" :key="index" @click="goDetailFun(item)" :style="{width: items.shopList.length > 2 ? '33.33%' : '50%'}">
          <view v-if="item.wmPoiId" class="list_banner_item_img">
            <image :src="item.picture" mode="widthFix" style="width: 100%;"></image>
            <image mode="widthFix"
                   src="https://img.alicdn.com/imgextra/i3/3829152210/O1CN01gKAL671SCE3PjsESI_!!3829152210.png"
                   style="width: 100%;"></image>
            <view v-if="newUser == '新用户'" class="list_banner_item_tip">返实付
              {{ twoFixed(item.planActivityInfoList[0].member_commission.ratio) }}
              %
            </view>
            <view v-if="newUser == '老用户'" class="list_banner_item_tip">返实付
              {{ userInfo?.is_member === 0 ? twoFixed(item.planActivityInfoList[0].commission.ratio) : twoFixed(item.planActivityInfoList[0].member_commission.ratio) }}
               %
            </view>
          </view>
          <view v-else class="list_banner_item_img">
            <image v-if="item.shop_info.logo" :src="item.shop_info.logo" mode="widthFix" style="width: 100%;"></image>
            <image v-else mode="widthFix"
                   src="https://img.alicdn.com/imgextra/i3/3829152210/O1CN01gKAL671SCE3PjsESI_!!3829152210.png"
                   style="width: 100%;"></image>
            <view v-if="newUser == '新用户'" class="list_banner_item_tip">
              {{ '满' + twoFixed(item.minimum_amount) + '返' + twoFixed(item.minimum_amount) }}
            </view>
            <view v-if="newUser == '老用户'" class="list_banner_item_tip">
              {{'满' + twoFixed(item.minimum_amount)+ '返' }}
              {{ userInfo?.is_member === 0 ? twoFixed(item.rebate_amount) : twoFixed(item.member_rebate_amount) }}
            </view>
          </view>
          <view class="list_banner_item_text ellipsis-one-line">{{ item.name }}</view>
        </view>
      </view>
    </view>
  </view>
  <!--显示列表banner图 v-if="items.show_type === 1"-->
  <view v-else class="shop_banner_box">
    <view @tap="toPageUtils(items)" class="swiper_item"><image :src="items.image"  style="width: 100%;height: 180rpx; object-fit: cover;"></image></view>
    <!--<swiper class="swiper" autoplay="true" interval="5000" >
      <swiper-item v-for="(item, index) in items.shopList" :key="index">
        <view class="swiper_item"><image :src="item" mode="widthFix" style="width: 100%;"></image></view>
      </swiper-item>
    </swiper>-->
  </view>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {BaseImgUrl} from "../../utils/lshttp";
import {useUserInfoStore} from "../../stores/modules/userInfo";
import ShopItem from "./shopItem.vue";
import {useCommonInfoStore} from "../../stores/modules/commonInfo";
import {toPageUtils} from "../../utils/utils";
const userInfoStore = useUserInfoStore()
const userInfo = userInfoStore.userInfo
// console.log('userInfo=', userInfo)
const { twoFixed } = useCommonInfoStore() // 使用commonInfoStore状态管理器
const props = defineProps({
  items: {
    type: Object
  },
  newUser: {
    type: String,
  },
  addressVal: {
    type: Object
  }
})
const emits = defineEmits(['changeShop'])
onMounted(() => {
  console.log('获取定位信息=', props.addressVal)
})
// 跳转页面
const gotoCategory = () => {
  console.log('跳转分类页面')
  uni.navigateTo({
    url: '/pages/search/category?latitude='
        + props.addressVal.latitude
        + '&longitude=' + props.addressVal.longitude
        + "&addressStr=" + props.addressVal.recommend
        + "&city=" + props.addressVal.city
  })
}
// 跳转详情页面
const goDetailFun = (item) => {
  console.log('跳转详情页面', item)
  if (userInfoStore.isLogin()) {
    if (item.wmPoiId){
      uni.navigateTo({
        url: '/pages_shopdetail/shopdetail_gf?&activeIndex=0' + "&planType=" + item.planActivityInfoList[0].planActivityType,
        events: {
          // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
          acceptDataFromOpenedPage: function (data) {
            console.log(data)
          },
          someEvent: function (data) {
            console.log(data)
            emits('changeShop', data)
          }
        },
        success: function (res) {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit('item', item)
        }
      })
    } else {
      uni.navigateTo({
        url: '/pages_shopdetail/shopdetail?id=' + item.shop_info.id + '&activityId=' + item.activity_id
      })
    }

  }
}
</script>

<style scoped lang="scss">
.shop_list_banner_item{
  background: linear-gradient( 180deg, #FFF9EF 0%, #FFFFFF 100%);
  border-radius: 20rpx;
  border: 4rpx solid #FFFFFF;
  padding: 20rpx 20rpx;
  display: flex;
  position: relative;
}
.shop_list_box{
  width: 100%;
}
/* 标题css */
.list_banner_title{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  .list_banner_title_content{
    flex: 1;
    display: flex;
    .list_banner_img{
      width: 48rpx;
      height: 48rpx;
    }
    .list_banner_title_text{
      padding-left: 10rpx;
      font-size: 32rpx;
      color: #3D3D3D;
      line-height: 44rpx;
    }
  }
  .list_banner_more{
    display: flex;
    align-items: center;
    .list_banner_more_text{
      font-size: 24rpx;
      color: #666666;
      line-height: 34rpx;
    }
  }
}
/* 店铺列表css */
.list_banner_content{
  display: flex;
  justify-content: space-between;
  .list_banner_item{
    width: 33.33%;
    padding-right: 20rpx;
    .list_banner_item_img{
      width: 100%;
      height: 200rpx;
      border-radius: 20rpx;
      overflow: hidden;
      position: relative;
      .list_banner_item_tip{
        height: 42rpx;
        line-height: 42rpx;
        text-align: center;
        padding: 0 10rpx;
        font-size: 24rpx;
        color: #FFFFFF;
        background: linear-gradient( 270deg, #FF7F14 0%, #FF5429 100%);
        border-radius: 0 20rpx 0 20rpx;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }
    .list_banner_item_text{
      font-size: 28rpx;
      color: #3D3D3D;
      line-height: 40rpx;
      margin-top: 20rpx;
    }
  }
  .list_banner_item:last-child{
    padding-right: 0;
  }
}

/*  */
.shop_banner_box{
  width: 100%;
  .swiper_item{
    width: 100%;
    height: 180rpx;
    border-radius: 20rpx;
    overflow: hidden;
  }
}
</style>